<template>
	<view>
		<!-- <navbar :backshow="true" :title="title" :navBarHeight="navBarHeight" :menuRight="menuRight" :menuTop="menuTop"
			:menuHeight="menuHeight"></navbar> -->

		<view class="nav-bar" :style="{ height: navBarHeight + 'px' }">
			<view class="search" :style="{
			      height: menuHeight + 'px',
			      'min-height': menuHeight + 'px',
			      'line-height': menuHeight + 'px',
			      left: menuRight + 'px',
			      top: menuTop + 'px',
			    }">
				<uni-icons type="back" size="25" @click="backs"></uni-icons>

				<view class="titlebox">{{ title }}</view>
			</view>

		</view>
		<!-- tab切换 -->
		<!-- 头部展位 -->
		<view class="main" :style="{ height: mainheight + 'px' }">123</view>
		<!-- 预约信息 -->
		<view class="bookxqbox" v-if="!ylshow">
			<uni-forms :modelValue="formData" ref="customForm" :rules="customRules">
				<view class="bookitem">
					<view class="bookitemlabname">班级：</view>
					<view class="bookitemlab">
						{{ userdata.organizationName }}
					</view>
				</view>
				<uni-forms-item label="主题" name="appointmentTheme">
					<uni-easyinput type="text" v-model="formData.appointmentTheme" placeholder="请输入主题" />
				</uni-forms-item>
				<uni-forms-item label="人数" name="appointmentNumber">

					<uni-easyinput type="number" v-model="formData.appointmentNumber" :placeholder="placeholders" />
				</uni-forms-item>
				<view class="bookitem">
					<view class="bookitemlabname">时间：</view>
					<view class="bookitemlab">
						{{ formData.single }} {{ formData.starttime }}~{{
              formData.endtime
            }}
					</view>
				</view>
				<view class="bookitems">
					<view class="roomnamebox">
						<view class="bookitemlabname">房间：</view>
						<view class="bookitemlab">
							{{ formData.roomname }}
						</view>
					</view>
					<view class="roomimages">
						<image :src="roomPhoto" mode="" class="roomimages"></image>
					</view>
				</view>
				<view class="bookitem">
					<view class="bookitemlabname">预约人：</view>
					<view class="bookitemlab">
						{{ userdata.nickname }}
					</view>
				</view>
			</uni-forms>
		</view>
		<!-- 预约信息预览 -->
		<view class="bookxqbox" v-if="ylshow">
			<uni-forms :modelValue="formData" ref="customForm" :rules="customRules">
				<view class="bookitem">
					<view class="bookitemlabname">班级：</view>
					<view class="bookitemlab">
						{{ userdata.organizationName }}
					</view>
				</view>
				<view class="bookitem">
					<view class="bookitemlabname">主题：</view>
					<view class="bookitemlab">
						{{ formData.appointmentTheme }}
					</view>
				</view>
				<view class="bookitem">
					<view class="bookitemlabname">人数：</view>
					<view class="bookitemlab">
						{{ formData.appointmentNumber }}
					</view>
				</view>

				<view class="bookitem">
					<view class="bookitemlabname">时间：</view>
					<view class="bookitemlab">
						{{ formData.single }} {{ formData.starttime }}~{{
		      formData.endtime
		    }}
					</view>
				</view>
				<view class="bookitems">
					<view class="roomnamebox">
						<view class="bookitemlabname">房间：</view>
						<view class="bookitemlab">
							{{ formData.roomname }}
						</view>
					</view>
					<view class="roomimages">
						<image :src="roomPhoto" mode="" class="roomimages"></image>
					</view>
				</view>
				<view class="bookitem">
					<view class="bookitemlabname">预约人：</view>
					<view class="bookitemlab">
						{{ userdata.nickname }}
					</view>
				</view>
			</uni-forms>
		</view>
		<!-- 站位 -->
		<view class="zwbox"></view>
		<!-- 按钮 -->
		<view class="savabox" @click="submitbf()" v-if="!ylshow">提交预约信息</view>
		<view class="backbox" @click="back" v-if="!ylshow">我要修改一下</view>
		<view class="savabox" @click="submit('customForm')" v-if="ylshow">提交预约信息</view>
		<view class="backbox" @click="backbf" v-if="ylshow">我要修改一下</view>


		<!-- 弹窗 -->
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="success" cancelText="关闭" confirmText="确定" title="提示"
				content="你是否要退出，刚才选择的预约 信息将无法保存。" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="alertDialogs" type="dialog">
			<uni-popup-dialog :type="success" cancelText="取消" confirmText="确定" title="提示"
				content="你是否要退出，刚才选择的预约 信息将无法保存。" @confirm="dialogConfirms"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ylshow: false,
				placeholders: '',
				scheduleNumbe: "",
				title: "预约信息",
				navBarHeight: 0, // 导航栏高度
				menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
				menuTop: 0, // 胶囊距底部间距（保持底部间距一致）
				menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
				mainheight: 0,
				userdata: {},
				formData: {},
				roomPhoto: "",
				customRules: {
					appointmentTheme: {
						rules: [{
							required: true,
							errorMessage: "请输入主题",
						}, ],
					},
					appointmentNumber: {
						rules: [{
								required: true,
								errorMessage: "请输入人数",
							},
							{
								validateFunction: this.check,
							}

						],
					},
				},
			};
		},
		onReady() {

			uni.getStorage({
				key: "datetime",
				success: (res) => {
					console.log("获取的数据：", res.data);
					// 可以在这里处理获取到的数据
					this.formData = res.data;
					this.scheduleNumbe = res.data.scheduleNumbe
					this.placeholders = '请输入预约人数，最多' + this.scheduleNumbe + '人'
					this.$refs.customForm.setRules(this.customRules);
					console.log("最多人数：", this.placeholders)
					this.getuser();
				},
				fail: function() {
					console.error("获取数据失败");
				},
			});

		},
		methods: {
			submitbf() {

				this.$refs.customForm.validate().then(res => {
					this.ylshow = true
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			backs() {
				this.$refs.alertDialogs.open();
				// uni.navigateBack({
				//   delta: 1,
				// });
			},
			check(rule, value, allData, callback) {
				console.log('验证', rule, value, this.scheduleNumbe);
				// if (value > this.scheduleNumbe) {
				// 	console.log('验证没通过', value, this.scheduleNumbe);
				// } else {
				// 	callback(); // 验证通过
				// }
				console.log('触发验证');
				if (value > this.scheduleNumbe) {
					return callback('请输入预约人数，最多' + this.scheduleNumbe + '人');
				}
				// callback();
			},
			submit(ref) {
				this.$refs[ref].validate().then((res) => {
					this.$myRequest({
						url: "/client/appointment/submitRoomAppointment",
						method: "POST",
						data: {
							roomId: this.formData.roomId,
							appointmentTheme: this.formData.appointmentTheme,
							appointmentNumber: this.formData.appointmentNumber,
							startTime: this.formData.single + " " + this.formData.starttime,
							endTime: this.formData.single + " " + this.formData.endtime,
							organizationId: this.userdata.organizationId,
						},
					}).then((res) => {
						if (res.code == 200) {
							uni.navigateTo({
								url: "/pages/roomsuccse/roomsuccse", // 要跳转的非 tabBar 页面路径，
							});
						}
						if (res.code == 500) {
							uni.navigateTo({
								url: "/pages/roomerror/roomerror", // 要跳转的非 tabBar 页面路径，
							});
						}
					});
				});
			},
			// 提交预约信息
			dialogConfirm() {
				uni.navigateTo({
					url: "/pages/roombook/roombook", // 要跳转的非 tabBar 页面路径，可以带参数
				});
			},
			dialogConfirms() {
				uni.navigateBack({
					delta: 1,
				});
			},
			backbf() {
				this.ylshow = false
			},
			back() {
				this.$refs.alertDialog.open();
			},
			getuser() {
				this.$myRequest({
					url: "/client/appointmentUser/userInfo",
					method: "GET",
				}).then((res) => {
					console.log("获取用户信息回显", res.data);
					this.userdata = res.data;
				});
				// 查询房间图片
				this.$myRequest({
					url: "/admin/room/list",
					method: "GET",
					data: {
						pageNum: 1,
						pageSize: 1,
						roomName: this.formData.roomname,
					},
				}).then((res) => {
					this.roomPhoto = JSON.parse(res.data.list[0].roomPhoto)[0];
					console.log("房间回显", res.data.list, this.roomPhoto);
				});
			},
		},
		onLoad() {
			const that = this;
			// 获取系统信息
			const systemInfo = wx.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			// 导航栏高度 = 状态栏高度 + 44
			that.navBarHeight = systemInfo.statusBarHeight + 44;
			that.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
			that.menuTop = menuButtonInfo.top;
			that.menuHeight = menuButtonInfo.height;
			that.mainheight = menuButtonInfo.top + menuButtonInfo.height;
		},
	};
</script>

<style>
	.nav-bar {
		position: fixed;
		width: 100%;
		top: 0;
		color: #fff;
		background: #fff;
		display: flex;
	}

	.nav-bar .search {
		color: black;
		font-size: 14px;
		background: #fff;
		position: absolute;
		width: 730rpx;

		/* padding-left: 14px; */
	}

	.titlebox {
		text-align: center;
		position: absolute;
		top: 0;
		font-size: 32rpx;
		width: 200rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}
</style>